<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TodoList</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <p style="color: darkorange">最原始的的todolist(没有用组件):</p>{{message}}
    <div>
        <input v-model="message" @keyup.enter="submit">
        <button @click="submit">提交</button>
        <ol>
            <li v-for="todo in todoList">{{todo}}</li>
        </ol>
    </div>
    <p style="color: darkorange">组件todolist:</p>{{message}}
    <div>
        <input v-model="message">
        <ol>
            <mytodolist v-for="(todo,index) in todoList"
                        :todo="todo"
                        :index="index"
                        @delete="handleDelete"
            ></mytodolist>
        </ol>
    </div>
</div>
</body>
<script type="text/javascript">

    var mytodolist = {
        props: ['todo', 'index'],
        template: '<li @click=handclick>{{todo}}</li>',
        methods: {
            handclick() {
                this.$emit('delete', this.index)
            }
        }
    }
    var app = new Vue({
        el: '#app',
        components: {
            mytodolist
        },
        data() {
            return {
                message: '',
                todoList: []
            }
        },
        methods: {
            submit() {
                if (this.message != '' && this.message != null) {
                    this.todoList.push(this.message)
                    this.message = ''
                }
            },
            handleDelete(index) {
                this.todoList.splice(index, 1)
            }
        }
    })
</script>
</html>